<template>
  <el-form ref="empEdit" :model="emp" label-width="100px" :rules="rules">
    <el-card>
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <el-row :gutter="24">
        <el-col :md="12" :sm="24">
          <el-form-item label="员工名">
            <el-input
              :value="emp.EmpName"
              :readonly="true"
              placeholder="员工名"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="员工编号">
            <el-input
              :value="emp.EmpNo"
              :readonly="true"
              placeholder="员工编号"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="性别" prop="Sex">
            <enumItem
              v-model="emp.Sex"
              :dic-key="HrEnumDic.hrUserSex"
              placeholder="性别"
              :filters="[0]"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="入职部门">
            <deptSelect
              :value="emp.DeptId"
              :readonly="true"
              placeholder="入职部门"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="员工类型">
            <enumItem
              :value="emp.UserType"
              :readonly="true"
              :dic-key="HrEnumDic.hrUserType"
              placeholder="员工类型"
            />
          </el-form-item>
        </el-col>
        <el-col :md="24" :sm="24">
          <el-form-item label="备注说明" prop="Show">
            <el-input
              v-model="emp.Show"
              type="textarea"
              maxlength="255"
              placeholder="备注说明"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>个人资料</span>
      </div>
      <el-row :gutter="24">
        <el-col :md="12" :sm="24">
          <el-form-item label="手机号" prop="Phone">
            <el-input
              v-model="emp.Phone"
              maxlength="15"
              placeholder="手机号"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="备用联系电话" prop="BackupPhone">
            <el-input
              v-model="emp.BackupPhone"
              maxlength="50"
              placeholder="备用联系电话"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="名族" prop="Nation">
            <dictItem
              v-model="emp.Nation"
              :dic-id="HrItemDic.nation"
              placeholder="名族"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="身份证号" prop="IDCard">
            <el-input
              v-model="emp.IDCard"
              maxlength="20"
              placeholder="身份证号"
              @change="idCardChange"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="生日" prop="Birthday">
            <el-date-picker
              v-model="emp.Birthday"
              class="el-input"
              type="date"
              placeholder="生日"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="Email" prop="Email">
            <el-input
              v-model="emp.Email"
              maxlength="255"
              placeholder="Email"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="住址" prop="Address">
            <el-input
              v-model="emp.Address"
              maxlength="100"
              placeholder="住址"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="上传头像">
            <imageUpBtn
              file-key="EmpHead"
              :link-biz-pk="empId"
              @change="fileChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-row style="text-align: center; margin-top: 20px">
      <el-button type="primary" @click="save">保存</el-button>
    </el-row>
  </el-form>
</template>

<script>
import deptSelect from '@/components/unit/deptSelect.vue'
import { HrItemDic, HrEnumDic } from '@/config/publicDic'
import imageUpBtn from '@/components/fileUp/imageUpBtn'
import {
  isIDCard,
  isPhone,
  isTelephone,
  validEmail
} from '@/utils/validate'
import * as empApi from '@/api/emp/emp'
import { SetPerson } from '@/api/login/empLogin'
import moment from 'moment'
export default {
  components: {
    deptSelect,
    imageUpBtn
  },
  props: {
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const vaildatePhone = async(rule, value, callback) => {
      if (value.isNull()) {
        callback()
      } else if (isPhone(value) === false) {
        callback(new Error('手机号格式错误!'))
      } else if (await this.checkRepeat(0, value)) {
        callback(new Error('手机号重复!'))
      } else {
        callback()
      }
    }
    const vaildateEmail = async(rule, value, callback) => {
      if (value.isNull()) {
        callback()
      } else if (value && validEmail(value) === false) {
        callback(new Error('Email格式错误!'))
      } else if (await this.checkRepeat(3, value)) {
        callback(new Error('Email重复!'))
      } else {
        callback()
      }
    }
    const vaildateTelephone = (rule, value, callback) => {
      if (value.isNull()) {
        callback()
      } else if (isTelephone(value) === false) {
        callback(new Error('备用联系电话格式错误!'))
      } else {
        callback()
      }
    }
    const vaildateIDCard = async(rule, value, callback) => {
      if (value.isNull()) {
        callback()
      } else if (isIDCard(value) === false) {
        callback(new Error('身份证号格式错误!'))
      } else if (await this.checkRepeat(2, value)) {
        callback(new Error('身份证号重复!'))
      } else {
        callback()
      }
    }
    return {
      HrEnumDic,
      HrItemDic,
      emp: {},
      loading: false,
      empId: null,
      rules: {
        Phone: [
          {
            required: true,
            message: '手机号不能为空！',
            trigger: 'blur'
          },
          {
            min: 11,
            max: 15,
            message: '手机号格式错误!',
            trigger: 'blur'
          },
          {
            required: true,
            trigger: 'blur',
            validator: vaildatePhone
          }
        ],
        Email: [
          {
            required: false,
            trigger: 'blur',
            validator: vaildateEmail
          }
        ],
        IDCard: [
          {
            required: false,
            trigger: 'blur',
            validator: vaildateIDCard
          }
        ],
        BackupPhone: [
          {
            required: false,
            trigger: 'blur',
            validator: vaildateTelephone
          }
        ]
      }
    }
  },
  computed: {
    user() {
      return this.$store.getters.user
    },
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    async reset() {
      this.loading = false
      this.empId = this.user.empId
      const res = await empApi.get(this.empId)
      this.emp = res
    },
    save() {
      this.$refs['empEdit'].validate((valid) => {
        if (valid) {
          this.saveDatum()
        } else {
          return false
        }
      })
    },
    async checkRepeat(type, value) {
      return await empApi.checkRepeat({
        EmpId: this.empId,
        CompanyId: this.comId,
        CheckType: type,
        Value: value
      })
    },
    async saveDatum() {
      this.loading = true
      await SetPerson({
        Sex: this.emp.Sex,
        Phone: this.emp.Phone,
        BackupPhone: this.emp.BackupPhone,
        IDCard: this.emp.IDCard,
        Birthday: this.emp.Birthday,
        Email: this.emp.Email,
        Show: this.emp.Show,
        Nation: this.emp.Nation,
        Address: this.emp.Address,
        UserHead: this.emp.UserHead,
        FileId: this.emp.FileId
      })
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
      this.loading = false
    },
    idCardChange(e) {
      if (this.emp.IDCard && this.emp.IDCard.length >= 14) {
        const date =
          this.emp.IDCard.substring(6, 10) +
          '-' +
          this.emp.IDCard.substring(10, 12) +
          '-' +
          this.emp.IDCard.substring(12, 14)
        this.emp.Birthday = moment(date)
      }
    },
    fileChange(fileId, files) {
      if (files.length === 0) {
        this.emp.UserHead = null
        this.emp.FileId = null
      } else {
        this.emp.UserHead = files[0].FileUri
        this.emp.FileId = fileId[0]
      }
    }
  }
}
</script>
